<template>
  <div class="correction">
    <mt-popup v-model="popShow1" position="right">
      <textarea class="textarea" placeholder="请输入纠错说明" v-model="content"></textarea>
      <mt-button type="default" :disabled="isDisabled" @click.native="submit">提交</mt-button>
    </mt-popup>
    <mt-popup v-model="popShow2" position="right" class="complete">
      <img src="/src/assets/icons/circle-bold-success.png" class="ok-pic">
      <span class="text">感谢您的纠错！一经采纳，将给予您奖励！</span>
    </mt-popup>
  </div>
</template>

<script>
  export default {
    name: 'Correction',
    data () {
      return {
        popShow1: false,
        popShow2: false,
        column: '',
        content: ''
      }
    },
    computed: {
      isDisabled () {
        return this.content === ''
      }
    },
    methods: {
      submit () {
        let params = {
          column: this.column,
          content: this.content
        }
        this.$post('/vue/correction/save', params).then(data => {
          this.content = ''
          this.popShow1 = false
          this.popShow2 = true
          setTimeout(() => {
            this.popShow2 = false
          }, 5000)
        })
      }
    }
  }
</script>

<style lang="less">
  @c-169: rgb(169, 169, 169);
  @c-226: rgb(226, 226, 226);
  @c-blue: rgb(108, 184, 222);

  .correction {
    .mint-popup {
      width: 100vw;
      background: transparent;
      text-align: center;
      .textarea {
        width: 77vw;
        height: 39vh;
        padding: 12px 16px;
        border-radius: 24px;
        transition: inherit;
        &::-webkit-input-placeholder {
          font-size: 12px;
          line-height: 24px;
          color: @c-169;
        }
      }
      .mint-button {
        margin: 32px;
        width: 168px;
        height: 40px;
        border-radius: 20px;
        background-color: @c-blue;
        color: #FFF;
        font-size: 13px;
        line-height: 24px;
        border: 0;
        &.is-disabled {
          opacity: 1;
          background-color: @c-226;
        }
        &::after {
          border-radius: 20px;
        }
      }
    }
    .complete {
      width: 100%;
      .ok-pic {
        display: block;
        margin: 0 auto;
        width: 64px;
        height: 64px;
      }
      .text {
        font-size: 13px;
        line-height: 24px;
        color: #FFF;
      }
    }
  }
</style>